<template>
	<div class="atten_box">
		<Row :gutter="16">
	        <Col span="12">
	        	<div class="left_big_box">
					<div class="left_tabs_box">
						<Row :gutter="16" style="margin-bottom:10px;">
							<Col span="12">								
								<div class="one_mech_box">
									<div class="top_con">
										<Row>
											<Col span="8">
												<div class="mach_left_state">
													<img class="mach_pic" src="/static/img/mach1.png"/>
													<div class="state_light_box">
														<ul>
															<li>
																<span class="gren_light"></span>
																<p>运行</p>
															</li>
															<li>
																<span class=""></span>
																<p>停止</p>
															</li>
															<li>
																<span class=""></span>
																<p>异常</p>
															</li>
															<li>
																<span ></span>
																<p>通讯失效</p>
															</li>
														</ul>
													</div>
												</div>
											</Col>
											<Col span="16">
												<div class="stat_data_tb_box">
													<div class="data_titl">
														<Icon type="ios-search" size="26" style="float:right;margin-right:10px"/>
													</div>
													<div class="iner_table_box">											
														<table border="0" cellspacing="0" cellpadding="0">
															<tr v-for="item of kongyaData">
																<td>{{item.type}}</td>
																<td>{{item.value}}</td>
																<td>{{item.ratio}}</td>
															</tr>
															
														</table>
													</div>										
												</div>
											</Col>
										</Row>									
										
									</div>
									<div class="botm_box">
										<span>状态采集模块|</span>
										<span>空压机（离心机）回水电动采集模块</span>
										<Icon type="md-star" style="float: right;margin:5px 10px " size="20" color="#697fec"/>
									</div>									
								</div>								
							</Col>
							<Col span="12">
								<div class="one_mech_box">
									<div class="top_con">
										<Row>
											<Col span="8">
												<div class="mach_left_state">
													<img class="mach_pic" src="/static/img/mach1.png"/>
													<div class="state_light_box">
														<ul>
															<li>
																<span class="gren_light"></span>
																<p>运行</p>
															</li>
															<li>
																<span class=""></span>
																<p>异常</p>
															</li>
															<li>
																<span ></span>
																<p>通讯失效</p>
															</li>
														</ul>
													</div>
												</div>
											</Col>
											<Col span="16">
												<div class="stat_data_tb_box">
													<div class="data_titl">
														<Icon type="ios-search" size="26" style="float:right;margin-right:10px;"/>
													</div>
													
													<div class="iner_table_box">
														<table border="0" cellspacing="0" cellpadding="0">
															<tr>
																<td>压力</td>
																<td>0.34</td>
																<td>Mpa</td>
															</tr>
														</table>
													</div>
													
												</div>
											</Col>
										</Row>										
										
									</div>
									<div class="botm_box">
										<span>状态采集模块|</span>
										<span>空压机（离心机）回水电动采集模块</span>
										<Icon type="md-star" style="float: right;margin:5px 10px " size="20" color="#697fec"/>
									</div>										
								</div>
							</Col>
						</Row>	
						<Row :gutter="16">
							<Col span="12">
								<machine_box></machine_box>
							</Col>
							<Col span="12">
								<machine_box></machine_box>
							</Col>
						</Row>
						<!-- <machine_box></machine_box>
						<machine_box></machine_box> -->
						
					</div>
					<div class="factory_little_sys_map">
						<Row :gutter="16">
							<Col span="12">
								<div class="one_sys_map">
									<div class="map_tite">
										<span>辽宁工厂/照明系统</span>
										<Icon type="md-star" style="float: right;margin:8px 10px " size="20" color="#697fec"/>
									</div>
									<div class="sys_map_cont_box">
										<img src="/static/img/sys_map.png"/>
									</div>
								</div>
							</Col>
							<Col span="12">
								<div class="one_sys_map">
									<div class="map_tite">
										<span>辽宁工厂/照明系统</span>
										<Icon type="md-star" style="float: right;margin:8px 10px " size="20" color="#697fec"/>
									</div>
									<div class="sys_map_cont_box">
										<img src="/static/img/sys_map.png"/>
									</div>
								</div>
							</Col>
						</Row>
						
						
					</div>
				</div>	
	        </Col>
	        <Col span="12">
	        	<div class="right_all_count_box">
	        		<Row :gutter="24">
	        			<Col span="8">
	        				<count_table></count_table>
	        			</Col>
	        			<Col span="8">
	        				<count_table></count_table>
	        			</Col>
	        			<Col span="8">
	        				<count_table></count_table>
	        			</Col> 							
	        		</Row>
					
					<div class="hist_rate_warp">
						<img > <!--  src="/static/img/1.png"/ -->
					</div>						
				</div>
	        </Col>
	    </Row>

	</div>
	
	
</template>

<script>
	import count_table from "../energy_watch/count_table"
	import machine_box from "../machWatch/one_machine_box"
	export default{
		components:{
			count_table,
			machine_box
		},
		data(){
			return {
				kongyaData:[
					{
						type:'开',
						value:'0',
						ratio:''
					},
					{
						type:'关',
						value:'0',
						ratio:''
					},
					{
						type:'阀门开度',
						value:'100',
						ratio:'%'
					},
					{
						type:'阀门关度',
						value:'0',
						ratio:'%'
					},
				]
			}
		}
	}
</script>

<style scoped="scoped">
@import url("atten.css");	

</style>